<template>
  <el-dialog ref="diaRef" v-model="visible" width="60%" title="选择楼盘">
    <div class="flex flex-row justify-center">
      <div class="w-[40%]">
        <div class="bg-[var(--el-fill-color-light)] px-35px py-10px relative">
          <el-checkbox v-model="leftAll" @change="chooseLeftAll" :disabled="diaProps.inAllList.length === 0"></el-checkbox>
          <span class="ml-10px text-[16px]">{{ props.leftTitle }}</span>
          <div class="absolute top-[50%] right-[35px] transform translate-y-[-50%]">{{ leftCheck }}/{{ leftLength }}</div>
        </div>
        <div class="border border-solid border-1px border-[var(--el-color-info-light-7)] p-10px box-border h-[364px]">
          <el-input
            v-model="leftQuery"
            @input="onLeftQueryChange"
            class="w-[70%] ml-20px"
            placeholder="请输入楼盘名字"
          ></el-input>
          <el-tree-V2
            :height="300"
            class="mt-10px"
            ref="leftRef"
            :data="diaProps.inAllList"
            :props="{ value: 'id', label: 'name' }"
            show-checkbox
            :filter-method="filter"
            :check-on-click-node="true"
          ></el-tree-V2>
        </div>
      </div>
      <div class="flex flex-col justify-center mx-10px">
        <div>
          <el-button :icon="ArrowLeftBold" @click="transferRightToLeft" :disabled="rightCheck === 0" type="primary"></el-button>
          <el-button :icon="ArrowRightBold" @click="transferLeftToRight" :disabled="leftCheck === 0" type="primary"></el-button>
        </div>
      </div>
      <div class="w-[40%]">
        <div class="bg-[var(--el-fill-color-light)] px-35px py-10px relative">
          <el-checkbox v-model="rightAll" @change="chooseRightAll" :disabled="diaProps.inNowList.length === 0"></el-checkbox>
          <span class="ml-10px text-[16px]">{{ props.rightTitle }}</span>
          <div class="absolute top-[50%] right-[35px] transform translate-y-[-50%]">{{ rightCheck }}/{{ rightLength }}</div>
        </div>
        <div class="border border-solid border-1px border-[var(--el-color-info-light-7)] p-10px box-border h-[364px]">
          <el-input
            v-model="rightQuery"
            @input="onRightQueryChange"
            class="w-[70%] ml-20px"
            placeholder="请输入楼盘名字"
          ></el-input>
          <el-tree-V2
            :height="300"
            class="mt-10px"
            ref="rightRef"
            :data="diaProps.inNowList"
            :props="{ value: 'id', label: 'name' }"
            show-checkbox
            :filter-method="filter"
            :check-on-click-node="true"
          ></el-tree-V2>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button type="primary" @click="sendLous">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElDialog, ElTreeV2, TreeNode } from "element-plus";
import { computed, ref } from "vue";
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";

const visible = ref(false);

const emits = defineEmits(["getBindLous"]);

interface DialogProps {
  allList: any;
  inAllList: any;
  inNowList: any;
}

interface Props {
  rightTitle: string;
  leftTitle: string;
}

const props = withDefaults(defineProps<Props>(), { leftTitle: "楼盘列表", rightTitle: "助手楼盘" });

const diaProps = ref<DialogProps>({ allList: [], inAllList: [], inNowList: [] });

const acceptParams = (params: DialogProps) => {
  diaProps.value = params;
  diaProps.value.inAllList = JSON.parse(JSON.stringify(params.inAllList));
  diaProps.value.inNowList = JSON.parse(JSON.stringify(params.inNowList));
  visible.value = true;
};

const leftRef = ref<InstanceType<typeof ElTreeV2> | null>();

// 左边过滤
const leftQuery = ref("");

const onLeftQueryChange = (query: string) => {
  leftRef.value?.filter(query);
};

// 左边全选
const leftAll = ref(0);
const chooseLeftAll = (val: any) => {
  if (val) {
    // 全选所有
    leftRef.value?.setCheckedKeys(diaProps.value.inAllList.map((e: any) => e.id));
  } else {
    leftRef.value?.setCheckedKeys([]);
  }
};

// 右边过滤
const rightRef = ref<InstanceType<typeof ElTreeV2> | null>();

const rightQuery = ref("");

const onRightQueryChange = (query: string) => {
  rightRef.value?.filter(query);
};

// 右边全选
const rightAll = ref(0);
const chooseRightAll = (val: any) => {
  if (val) {
    // 全选所有
    rightRef.value?.setCheckedKeys(diaProps.value.inNowList.map((e: any) => e.id));
  } else {
    rightRef.value?.setCheckedKeys([]);
  }
};

// 查找出id对应的index
const findIndexById = (list: any[], ids: number[]) => {
  let indexs = [];
  for (let i = 0; i < list.length; i++) {
    for (let j = 0; j < ids.length; j++) {
      if (list[i].id === ids[j]) {
        indexs.push(list[i]);
      }
    }
  }

  return indexs;
};

// 左边长度
const leftLength = computed(() => {
  return diaProps.value.inAllList.length;
});

const leftCheck = computed(() => {
  return leftRef.value?.getCheckedKeys().length;
});

// 右边长度
const rightLength = computed(() => {
  return diaProps.value.inNowList.length;
});

const rightCheck = computed(() => {
  return rightRef.value?.getCheckedKeys().length;
});

// 从左往右
const transferLeftToRight = () => {
  let leftKeys = leftRef.value?.getCheckedKeys();
  if (leftKeys?.length === 0) return;
  let rightKeys = diaProps.value.inNowList.map((e: any) => e.id);
  let newTempKeys = findIndexById(diaProps.value.allList, [...(leftKeys as any), ...rightKeys]).map((e: any) => e.id);
  diaProps.value.inAllList = diaProps.value.inAllList.filter((e: any) => !leftKeys?.includes(e.id));
  leftRef.value?.setCheckedKeys([]);
  diaProps.value.inNowList = findIndexById(diaProps.value.allList, newTempKeys);
};
// 从右往左
const transferRightToLeft = () => {
  let rightKeys = rightRef.value?.getCheckedKeys();
  if (rightKeys?.length === 0) return;
  let leftKeys = diaProps.value.inAllList.map((e: any) => e.id);
  let newTempKeys = findIndexById(diaProps.value.allList, [...leftKeys, ...(rightKeys as any)]).map((e: any) => e.id);
  diaProps.value.inNowList = diaProps.value.inNowList.filter((e: any) => !rightKeys?.includes(e.id));
  rightRef.value?.setCheckedKeys([]);
  diaProps.value.inAllList = findIndexById(diaProps.value.allList, newTempKeys);
};

// 节点过滤
const filter = (query: string, node: TreeNode) => {
  return (node as any).name!.includes(query);
};

// 绑定楼盘
const sendLous = () => {
  console.log(diaProps.value.inNowList);

  emits("getBindLous", diaProps.value.inNowList);

  visible.value = false;
};

defineExpose({ acceptParams });
</script>

<style lang="scss" scoped></style>
